<template>
<div class="login">
	<navSimple @goBack="goBackTop()"></navSimple>
	<div class="user-con">
		 			<div class="user-title">用户登陆</div>
		 			<div class="user-box">
		 				<div class="error-item" v-show="errMsg">
		 					<i class="iconfont icon-warning "></i>
		 					<p class="error-msg">{{errMsg}}</p>
		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="username"><i class="iconfont icon-account" ></i>
			 				</label>
			 				<input class='user-content'  ref="username"placeholder="请输入用户名" autocomplete="off">

		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="password"><i class="iconfont icon-password" ></i>
			 				</label>
			 				<input class='user-content'  type='password' ref="password" 	placeholder="请输入密码" autocomplete="off">
			 				
		 				</div>
		 				<span  class="btn btn-submit" @click="userLogin()">登陆</span>
		 				<div class="link-item"> 
		 				<span class="forgetPassword" @click="regAndRes('reset')">
		 					忘记密码
		 				</span>
		 				<span class="register" @click="regAndRes('register')">
		 					立即注册
		 				</span>
		 				</div>
		 			</div> 
		 		</div>
</div>

</template>

<script>
 import 'common/css/reset.css';
  import 'common/css/iconfont.css';
import navSimple from"components/units/navSimple.vue";
var _user=require("common/util/server/userServer.js");
var _mm=require("common/util/mm.js");

export default {

  name: 'login',

  data () {
    return {
    	errMsg:""
    };
  },
  created(){
  	this.errMsg="";
  

  },
  methods:{
    regAndRes(what){
      window.location.href="./regandres.html?toDo="+what;
    },
    goBackTop(){
      this.$emit("closeevent");
    },
  	userLogin(){
  		var _this=this
  		var password= this.$refs.password.value;
  		
  	
  		var username= this.$refs.username.value;

  			if( !_mm.validate(username,"require") ){
  					this.errMsg= "用户名不能为空"
  				return
  			}
  			else if( !_mm.validate(password,"require") )
  			{
  				this.errMsg="密码不能为空"
  				return
  			}else{
  				_user.login({username:username,password:password },
  					function(res){

  						_this.errMsg="";
  						_this.$emit("closeevent");
              _this.$emit("loginSuccess");
              window.history.back();
  						

  				},function(msg){
  					_this.errMsg= msg;
					
  				})
  			}
  	

  	}
  },
  components:{
  	navSimple
  }
};
</script>

<style lang="stylus" scoped>


.login{
	position:absolute
	left:0
	top:0px
	width:100%
	height:100%
	background:white
	z-index: 50
}
/*表单狂*/
.user-con{
	position:relative;
	width: 90%;
	margin:0 auto;
	background: #fff;
}
.user-con .user-title{
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
	font-size: 18px;
	font-weight: bold;
	color: #666;

}
 .user-con .user-box{
 	padding: 20px 0;
 	margin:0 auto;

 }
 /*错误提示框*/
  .user-con .user-box .error-item{
  	margin:0 auto;
  	position: relative;
  	padding: 4px 0 4px 4px;
  	margin-bottom: 10px;
  	border:1px solid red;
  	color: red;
  	background: #fde9e9;
  	
  }
/*错误图标*/
  .user-con .user-box .error-icon{
  	position: absolute;
  	left: 14px;
  	top:  50%;
  	font-size: 14px;
  	margin-top: -7px;
  }
  .user-con .user-item {
  	position: relative;
  	margin:30px 30px	

  }
    .user-con .user-item  .user-label{
    	position: absolute;
    	left: 1px;
    	top: 1px;
    	bottom: 1px;
    	width: 40px;
    	line-height: 36px;
    	background: #f3f3f3;
    	font-size: 18px;
    	color: #d3d3d3;
    	text-align: center;
    	border-right: 1px solid #bdbdbd;
    }

       .user-con .user-item  .user-content{
       	padding: 10px 0px 10px 50px;
       	width: 100%;
       	height: 18px;
       	width:236px;
       	line-height: 18px;
         outline: none;
       	font-size: 15px;
       	border:1px solid #bdbdbd;


       }

       .user-con .btn-submit{
       	display:block;
       	background:rgb(222, 64, 43);
       	margin:0 30px;
       	color:white;
       	font-weight:400;
       	width: 288px;
       	padding: 6px 0;
       	text-align: center;
       	font-size: 20px;


      }
/*跳转链接*/
   
   .user-con .link-item{
   margin:10px 30px}
   	
	.user-con .register{
		float:right;
		margin-right:30px

	}
	
	@media screen and (max-width: 350px) {
  .user-con .user-item {
	
  	margin:30px 5px	

}
.user-con .btn-submit{
      
       	margin:0 5px;
  }
  
  }
</style>